<template>
  <div style="width: 100%">
    <el-table
      :data="tableData"
      style="width: 100%"
      @row-dblclick="open_project"
    >
      <el-table-column type="index" style="width: 5%"> </el-table-column>
      <el-table-column label="project name" style="width: 30%">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.project_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="manager id" style="width: 20%">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.manager_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="version id" style="width: 20%">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.version_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="operation" style="width: 25%">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >上传</el-button
        > -->
          <uploader
            :options="options"
            class="uploader-example"
            ref="uploader"
            @file-added="onFileAdded"
            @file-complete="onFileComplete"
          >
            <uploader-unsupport></uploader-unsupport>
            <uploader-btn :directory="true">select folder</uploader-btn>
            <uploader-list></uploader-list>
          </uploader>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >下载</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>上传成功</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
        target: "//localhost:8011/updir",
        testChunks: false,
      },
      tableData: [
        {
          project_name: "project1",
          manager_id: "system",
          version_id: "2.0.1",
        },
        {
          project_name: "project1",
          manager_id: "system",
          version_id: "2.0.1",
        },
        {
          project_name: "project1",
          manager_id: "system",
          version_id: "2.0.1",
        },
        {
          project_name: "project1",
          manager_id: "system",
          version_id: "2.0.1",
        },
      ],
      dialogVisible: false,
      to_server_tree_data: {},
    };
  },
  methods: {
    onFileAdded(file) {
      console.log(file)
      this.$nextTick(() => {
        console.log(this.$refs["uploader"].fileList);
      });
    },
    onFileComplete(rootFile) {
      this.to_server_tree_data.dir = JSON.stringify(this.create_tree(rootFile));
      // console.log(this.to_server_tree_data.dir);
      // this.$nextTick(() => {
      //   console.log(this.$refs["uploader"].fileList);
      // });
      this.$axios
        .post("/api/updirtree", this.to_server_tree_data)
        .then(() => {
          this.dialogVisible = true;
          // console.log(res);
        });
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    open_project(row) {
      console.log(row.project_name);
      this.$router.push({ path: "/home/tree" });
    },
    create_tree(rootFile) {
      let temp = this.traversal(rootFile);
      return temp;
    },
    traversal(node) {
      let temp = {};
      temp.name = node.name;
      if (node.isFolder) {
        temp.isDir = true;
        temp.children = [];
        for (let index = 0; index < node.fileList.length; index++) {
          temp.children.push(this.traversal(node.fileList[index]));
        }
      } else {
        temp.isDir = false;
      }
      return temp;
    },
  },
};
</script>